<template>
  <div class="box">
    <div class="btop">
      <div class="btop-l">
        <div class="bt1" :class="detail.side == '多' ? 'bggreen' : 'bgred'">
          {{ detail.side }}
        </div>
        <div class="bt2">{{ detail.symbolName }} {{ $t("common.yongxu") }}</div>
        <div class="bt3">
          {{
            detail.mode == "全仓" ? $t("common.quancang") : $t("long.zhucang")
          }}
          {{ detail.multiple }}x
        </div>
        <div class="bt4" @click="showShuXianModel">
          <div
            v-for="(zz, zindex) in detail.shuxiannum1"
            :key="zindex"
            class="xshuxian shuxianlv"
          ></div>
          <div
            v-for="(zz, zindex) in detail.shuxiannum2"
            :key="zindex + detail.shuxiannum1"
            class="xshuxian"
          ></div>
        </div>
      </div>
      <img
        @click="showShare"
        class="shareimg"
        src="../../../assets/images/share.png"
        alt=""
      />
    </div>
    <div class="bm1">
      <div class="bm1-item">
        <div class="bmf1">{{ $t("common.weishixianyingkui") }}（USDT）</div>
        <div class="bmf2" :class="+detail.floatProfit > 0 ? 'green' : 'red'">
          {{
            +detail.floatProfit > 0
              ? "+" + detail.floatProfit
              : detail.floatProfit || "--"
          }}
        </div>
      </div>
      <div class="bm1-item">
        <div class="bmf1">{{ $t("common.shouyilv") }}</div>
        <div
          class="bmf2"
          :class="+detail.positionProfitRate > 0 ? 'green' : 'red'"
        >
          {{
            detail.positionProfitRate
              ? detail.positionProfitRate + "%"
              : "0.00%"
          }}
        </div>
      </div>
    </div>
    <div class="bm2">
      <div class="bm2-item">
        <div class="bm2f1" style="text-decoration: underline;" @click="showTips">
          {{ $t("common.chicangshuliang") }} ({{
            curyType != "zhang"
              ? curyType === "token"
                ? detail.tokenCurName
                : detail.mainCurName
              : $t('common.zhang')
          }})
        </div>
        <div class="bm2f2">
          {{
            curyType != "zhang"
              ? curyType === "main"
                ? $formatMoney(detail.uNowNum, 10) || "--"
                : detail.nowNum || "--"
              : $formatMoney(parseInt(detail.nowNum * detail.sheet), 11)
          }}
        </div>
      </div>
      <div class="bm2-item">
        <div class="bm2f1">
          {{ $t("common.baozhengjin") }} ({{ detail.mainCurName }})
          <img
            v-if="detail.mode == '逐仓' && hideSomes != 2"
            @click="showChangeMargin"
            style="width: 3.2vw; position: relative; top: 0.5px"
            src="../../../assets/images/xiaojia.png"
            alt=""
          />
        </div>
        <div class="bm2f2">{{ $formatMoney(detail.margin, 2) || "--" }}</div>
      </div>
      <div class="bm2-item">
        <div class="bm2f1">{{ $t("long.baozhengjinlv") }}</div>
        <div
          class="bm2f2"
          :class="
            detail.marginRate == null
              ? 'white'
              : +detail.marginRate >= 60
              ? 'green'
              : +detail.marginRate >= 30
              ? 'orange'
              : 'red'
          "
        >
          {{ detail.marginRate ? detail.marginRate + "%" : "--" }}
        </div>
      </div>
      <div class="bm2-item">
        <div class="bm2f1">
          {{ $t("common.kaicangjiage") }} ({{ detail.mainCurName }})
        </div>
        <div class="bm2f2">
          {{ $formatMoney(detail.openAvgPrice, 10) || "--" }}
        </div>
      </div>
      <div class="bm2-item">
        <div class="bm2f1">
          {{ $t("common.biaojijiage") }} ({{ detail.mainCurName }})
        </div>
        <div class="bm2f2">
          {{ $formatMoney(detail.markPrice, 10) || "--" }}
        </div>
      </div>
      <div class="bm2-item">
        <div class="bm2f1">
          {{ $t("common.qiangpingjiage") }} ({{ detail.mainCurName }})
        </div>
        <div class="bm2f2">
          {{
            +detail.liquidatePrice > 0
              ? $formatMoney(detail.liquidatePrice, 10) || "--"
              : "--"
          }}
        </div>
      </div>
    </div>
    <div class="btnbox" v-if="hideSomes != 2">
      <div class="bitem" @click="$emit('handlePositonMultiple', detail)">
        {{ $t("long.tip_tiaozhenggang1") }}
      </div>
      <div class="bitem" @click="$emit('handlePositionStop', detail)">
        {{ $t("long.zhiyingsun") }}
      </div>
      <div class="bitem" @click="$emit('handlePositionClose', detail)">
        {{ $t("common.pingcang") }}
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";

export default {
  props: ["detail", "curyType", "hideSomes"],
  data() {
    return {
    };
  },

  methods: {
    showTips(){
      this.$emit("showZhangTip", this.detail);
    },
    showShare() {
      this.$emit("shareImg", this.detail);
    },
    showShuXianModel() {
      Dialog.alert({
        message: this.$t("long.longzhishidong"),
        confirmButtonText: this.$t("common.haode"),
        theme: "round-button",
        messageAlign: "left",
      }).then(() => {
        // on close
      });
    },
    showChangeMargin() {
      this.$emit("showChangeMargin", this.detail);
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  padding: 3vw;
  .btop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5vw;
    .btop-l {
      display: flex;
      align-items: center;
      .bt1 {
        width: 4.5vw;
        height: 4.5vw;
        background-color: rgb(0, 167, 127);
        border-radius: 2px;
        color: #fff;
        text-align: center;
        line-height: 4.5vw;
        margin-right: 2vw;
      }
      .bt2 {
        color: #fff;
        font-size: 3.6vw;
        margin-right: 2.4vw;
        font-weight: 600;
      }
      .bt3 {
        color: #8992AE;
        font-size: 3.2vw;
        margin-right: 2vw;
      }
    }
    .shareimg {
      width: 5.3vw;
    }
  }
}
.bm1 {
  display: flex;
  justify-content: space-between;
  .bm1-item {
    display: flex;
    flex-direction: column;
    text-align: left;
    .bmf1 {
      font-size: 3.2vw;
      color: #8992AE;
    }
    .bmf2 {
      font-size: 5vw;
      font-weight: 600;
      margin-top: 2.4vw;
      color: #e45360;
    }
    &:last-child {
      text-align: right;
    }
  }
}
.bm2 {
  margin-top: 2.4vw;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .bm2-item {
    width: 33.3%;
    flex: 0 0 33.3%;
    display: flex;
    flex-direction: column;
    text-align: left;
    height: 14vw;
    justify-content: center;
    .bm2f1 {
      font-size: 3.2vw;
      margin-bottom: 2vw;
      color: #8992AE;
    }
    .bm2f2 {
      font-size: 3.2vw;
      font-weight: 600;
      color: #fff;
    }
    &:nth-child(3n) {
      text-align: right;
    }
  }
}
.btnbox {
  display: flex;
  padding: 4vw 0vw;
  justify-content: space-between;
  align-items: center;
  .bitem {
    width: 30vw;
    height: 8vw;
    line-height: 8vw;
    background-color: #171A2B;
    font-size: 3.2vw;
    color: #fff;
    border-radius: 2px;
  }
}
.xshuxian {
  display: inline-block !important;
  margin-right: 4px !important;
  width: 3px !important;
  height: 13px;
  border-radius: 2px;
  background: #8992AE;
}
.shuxianlv {
  background: #5eba89;
}
.orange {
  color: orange !important;
}
.red {
  color: #e45360 !important;
}

.green {
  color: #5eba89 !important;
}
.bgred {
  background-color: #e45360 !important;
}

.bggreen {
  background-color: #5eba89 !important;
}
.white {
  color: #fff !important;
}
</style>